<template>
    <n-card title="访问数量" size="small" id="vc_userAccessChart">
        <template #header-extra>123</template>
        <div class="card-body" style="gap: 1rem"></div>
    </n-card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { CheckCircleOutlineFilled, WarningAmberFilled, DangerousOutlined } from '@vicons/material'

const percentage = ref(30)
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
#vc_userAccessChart {
    //min-width: 300px;
  
    @media (min-width: sea-viewport.$phone_min) {
        //max-width: var(--max_width_3items);
    }
}
.card-body {
    display: flex;
    flex-wrap: wrap;

    section {
        display: flex;
        align-items: center;
        gap: 3rem;
    }
}
</style>
